<template>
  <div>
      <div class="cover"></div>
     <transition @before-enter="handleBeforeEnter"
     @enter="handleEnter"
     >
     <slot></slot>
     </transition>
  </div>
</template>

<script>
export default {
    data(){
        return {
            isShow:false
        }
    },
    methods:{
        handleBeforeEnter(){
            this.isShow = true
        },
        handleEnter(){
            setTimeout(()=>{
                this.isShow = false
            },200)
        }
    }
}
</script>

<style>
    .v-enter-active{
        animation: animate 2s linear;
    }
    @keyframes animate{
        0%{
            opacity: 0;
            transform: translateY(0);
        }
        50%{
            opacity: 1;
            transform: translateY(10px);
        }
        100%{
            opacity: 0;
            transform: translateY(0);
        }
    }
    .cover{
        width: 100%;
        height: 100%;
        background-color: white;
        position: fixed;
        z-index: -1;
    }
</style>